/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <ul class="timeLine">
    <li :class="['timeLine-item', (data.length === index+1)? 'timeLine-item-last' : '']" v-for="(item, index) in data" :key="index">
      <div class="timeLine-item-tail"></div>
      <div class="timeLine-item-head">
        <Head :name="item.auditor_avatar" :width=30 :size=10></Head>
      </div>
      <div class="timeLine-item-content">
        <div class="content-info">
          <p class="people">{{item.auditor_name}}</p>
          <p class="type">{{item.activity_name}}</p>
          <p class="action" :style="getActionColor(item.action_text)">{{item.action_text}}</p>
          <p class="time">{{item.create_time}}</p>
        </div>
        <p class="content-mark" v-if="item.description"><span class="label">处理意见</span><span class="value">{{item.description}}</span></p>
         <p class="content-mark" v-if="item.signimg"><span class="label">手写签名</span><span class="value" style="display: flex;justify-content: center; align-items: center;">
           <img class="horiImg" :src="item.signimg" :alt="item.activity_name" style="max-width: 100%;max-height: 80px;">
         </span></p>
        <div 
          class="content-img" 
          v-if="item.attachments && item.attachments.image && item.attachments.image.length>0"
        >
          <img :src="j.url" alt="" v-for="(j,k) in item.attachments.image" :key="k" @click="showImages(item.attachments.image, k)">
        </div>
        <ul 
          class="content-file" 
        >
          <!-- <img :src="j.url" alt="" v-for="(j,k) in item.attachments.file" :key="k" @click="handlerPDF(j)"> -->
          <li class="fileBox" v-for="(j,k) in item.attachments.file" :key="k" @click="handlerPDF(j)">
            <img src="../../../static/img/pdf.png" alt="">
            <div class="right">
              <div class="name">{{j.title+j.imagetype}}</div>
              <div class="size">{{getSize(j.size)}}</div>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<script>
import Head from "../Head/Head";
import { actionColor } from "../../util/contact.js";

export default {
  props: {
    data: {
      type: Array,
      required: true,
      default: []
    },
    showImages: Function,
    handlerPDF: Function
  },
  data() {
    return {
      color: actionColor
    };
  },
  methods: {
    getSize(data) {
      if (data / 1024 >= 1024) {
        return Math.round((data / 1024 / 1024) * 100) / 100 + "M";
      } else {
        return Math.round((data / 1024) * 100) / 100 + "KB";
      }
    },
    getActionColor(action) {
      console.log("actionColor", actionColor);
      console.log("action", action);
      console.log("color", actionColor[action]);
      return `color:${actionColor[action]}`;
    }
  },
  components: {
    Head
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.timeLine {
  font-size: 14px;
  list-style: none;
  margin: 0;
  .timeLine-item {
    position: relative;
    padding-bottom: 20px;
    // padding: 0 0 10px;
    .timeLine-item-tail {
      position: absolute;
      left: 14px;
      top: 30px;
      height: 100%;
      border-left: 2px dotted @border-base;
    }
    .timeLine-item-head {
      position: absolute;
      left: 0;
      top: 0;
    }
    .timeLine-item-content {
      margin-left: 40px;
    }
    .content-info {
      font-size: 14px;
      display: flex;
      line-height: 30px;
      border-bottom: 1px dotted @border-base;
      .people {
        text-align: left;
        max-width: 100px;
      }
      .type {
        flex: 1;
        text-align: left;
        padding-left: 8px;
        box-sizing: border-box;
      }
      .action {
        padding-right: 8px;
      }
      .time {
        font-size: 12px;
        max-width: 120px;
        text-align: right;
        color: @font-secondary;
      }
    }
    .content-img {
      width: 100%;
      font-size: 0;
      padding-bottom: 8px;
      img {
        display: inline-block;
        width: 20%;
        box-sizing: border-box;
        height: 15vw;
        overflow: hidden;
        padding-right: 5px;
        vertical-align: bottom;
      }
    }
    .content-mark {
      padding: 5px 0;
      font-size: 14px;
      display: flex;
      .label {
        color: @font-regular;
        width: 66px;
        max-width: 66px;
        min-width: 66px;
        flex: 0;
        &:after {
          content: ":";
          margin: 0 8px 0 2px;
          position: relative;
          top: -1px;
        }
      }
      .value {
        color: @font-primary;
        flex: 1;
        text-align: left;
        overflow: hidden;
        word-wrap: break-word;
      }
    }
    .content-file {
      font-size: 0;
      .fileBox {
        padding-bottom: 8px;
        img {
          height: 30px;
          width: 30px;
          display: inline-block;
          margin-right: 5px;
          vertical-align: top;
        }
        .right {
          display: inline-block;
          width: calc(~"100% - 35px");
          .name {
            font-size: 13px;
            color: @font-regular;
            line-height: 18px;
          }
          .size {
            font-size: 12px;
            color: @font-secondary;
            line-height: 12px;
          }
        }
      }
    }
  }
  .timeLine-item-last {
    .timeLine-item-tail {
      height: 0;
    }
  }
   .horiImg {
      // width: 36px;
      // height: 80px;
      transform: rotate(270deg);
      // position: absolute;
      // top: -22px;
      // right: 20px;
      // width: 280px;
      // height: 80px;
    }
}
</style>
